<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2025/10/13
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>课程章节管理</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/back-index.css" />
    <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-mypaginator.js"></script>
    <style type="text/css" >
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            width: 100%;
            text-align: center;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .file:focus {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
    </style>

    <script type="text/javascript" >
        $(function(){
            //返回课程列表
            $("#back").on('click', function(){
                location.href = "${pageContext.request.contextPath}/course/findAll?pageNo=${coursePage.pageNum == 0 ? 1 : coursePage.pageNum}";
            });

            // 相关评论按钮点击事件
            $(".comment-detail").on('click',function(){
                location.href="${pageContext.request.contextPath}/comment/findByResourceId?resourceId="+$(this).attr("data-resource-id")+"&pageNo=1";
            });


            //添加章节
            $("#doAddCourseReource").on('click', function(){
                $(".modal-title").html("添加章节");
                $("#course-resource-id-input").hide();
                $("#courseReourceModal").modal("show");

            });


            // 提交添加章节表单
            <%--$("#addChapter").on('click', function(){--%>
            <%--    event.preventDefault();--%>
            <%--    let formData = new FormData($("#addCourseResourceForm")[0]);--%>

            <%--    $.ajax({--%>
            <%--        url: "${pageContext.request.contextPath}/Chapter/addChapter",--%>
            <%--        type: "post",--%>
            <%--        data: formData,--%>
            <%--        processData: false,--%>
            <%--        contentType: false,--%>
            <%--        success: function (result) {--%>
            <%--            if (result.responseCode == "2001") {--%>
            <%--                let currentCourseId = "${courseId}";--%>
            <%--                location.href = "${pageContext.request.contextPath}/Chapter/findAll?courseId=" + currentCourseId + "&pageNo=${chapterPage.pageNum == 0 ? 1 : chapterPage.pageNum}"--%>
            <%--            } else {--%>
            <%--                $("#errorMsg").html(result.message);--%>
            <%--            }--%>
            <%--        },--%>
            <%--        error: function(xhr, status, error) {--%>
            <%--            console.log("请求失败:", status, error);--%>
            <%--            console.log("服务器响应状态:", xhr.status);--%>
            <%--            console.log("服务器响应内容:", xhr.responseText);--%>
            <%--            $("#errorMsg").html("添加章节失败，请查看控制台日志获取详细信息");--%>
            <%--        }--%>
            <%--    });--%>
            <%--});--%>


            // 分页条件查询
            $("#doSearch").click(function() {
                $("#searchForm").submit();
            });
            $("#chapterPageHelper").bootstrapPaginator({
                bootstrapMajorVersion: 3,
                currentPage: "${chapterPage.pageNum == 0 ? 1 : chapterPage.pageNum}",
                totalPages: "${chapterPage.pages == 0 ? 1 : chapterPage.pages}",
                size: "normal",
                alignment: "center",
                onPageClicked: function (event, originalEvent, type, page) {
                    $("#pageNo").val(page);
                    $("#searchForm").submit();
                }
            });


            //启用与禁用
            $("input[name='modifyStatus']").click(function () {
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/Chapter/modifyStatus",
                    data: {
                        "id": $(this).attr("data-id"),
                        "status": $(this).attr("data-status")
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.href = "${pageContext.request.contextPath}/Chapter/findAll?courseId=${courseId}&pageNo=${chapterPage.pageNum == 0 ? 1 : chapterPage.pageNum}";
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            });









            // $(".course-reource-btn").on('click', function(){
            //     $("#courseReourceModal").modal("hide");
            // });








            $(".course-reource-modify-btn").on("click", function() {
                let chapterId = $(this).attr("data-id");
                $(".modal-title").html("修改章节");
                $("#course-resource-id-input").show();
                $.ajax({
                    type: "post",
                    url: "${pageContext.request.contextPath}/Chapter/findById",
                    data: {"id": chapterId},
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            $("#course-resource-id").val(result.returnObject.id);
                            $("#course-resource-title").val(result.returnObject.title);
                            $("#course-resource-context").val(result.returnObject.info);
                            $("input[name='courseId']").val(result.returnObject.courseId);

                            if (result.returnObject.resource) {
                                $("#course-resource-file-title").val(result.returnObject.resource.title);
                                $("#file-cost-type").val(result.returnObject.resource.costType);
                                $("#file-cost-type-val").val(result.returnObject.resource.costNumber);
                                $("#resource-type-id").val(result.returnObject.resource.fileType);
                            }

                            $("#courseReourceModal").modal("show");
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            });




            //章节修改
            $("#addCourseResourceForm").append('<input type="hidden" id="operationType" name="operationType" value="add">');
            $("#courseReourceModal").on('show.bs.modal', function () {
                //开始显示但尚未完全显示时触发
                if ($(".modal-title").html() === "修改章节") {
                    $("#operationType").val("update");
                } else {
                    $("#operationType").val("add");
                    $("#addCourseResourceForm")[0].reset();
                }
            });

            $("#addChapter").on('click', function(event){
                event.preventDefault();
                let formData = new FormData($("#addCourseResourceForm")[0]);
                let operationType = $("#operationType").val();
                console.log("当前操作类型:", operationType);

                let url = "${pageContext.request.contextPath}/Chapter/addChapter";

                if (operationType === "update") {
                    url = "${pageContext.request.contextPath}/Chapter/modifyChapter";
                }

                $.ajax({
                    url: url,
                    type: "post",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            let currentCourseId = "${courseId}";
                            location.href = "${pageContext.request.contextPath}/Chapter/findAll?courseId=" + currentCourseId + "&pageNo=${chapterPage.pageNum == 0 ? 1 : chapterPage.pageNum}"
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                });
            });


            //显示播放页
            $(".resource-detail").on('click', function(){
                let resourceId = $(this).attr("data-resource-id");
                console.log("获取到的资源ID: " + resourceId);
                if(resourceId && resourceId != '') {
                    if ($(this).attr("data-type") == "mp4") {
                        $('#frame-id', window.parent.document).attr('src', '${pageContext.request.contextPath}/resource/findById?id=' + resourceId);
                    } else {
                        $('#frame-id', window.parent.document).attr('src', '${pageContext.request.contextPath}/resource//Download?id=' + resourceId);
                    }
                } else {
                    alert('资源ID不存在，无法查看详情');
                }
            });












            //显示播放页
            // $(".resource-detail").on('click', function(){
            //     // $('#frame-id', window.parent.document).attr('src', 'back_resourceDetailSet.html');
            // });

            // 显示隐藏查询列表
            $('#show-course-resource-search').click(function() {
                $('#show-course-resource-search').hide();
                $('#upp-course-resource-search').show();
                $('.show-course-resource-search').slideDown(500);
            });
            $('#upp-course-resource-search').click(function() {
                $('#show-course-resource-search').show();
                $('#upp-course-resource-search').hide();
                $('.show-course-resource-search').slideUp(500);
            });



        });

        function fileUpload(item){
            $(item).click();
        }
        function fileChange(item){
            var file = item.files[0];//获取选中的第一个文件
            $(".file").html(file.name);
            //console.log("file", file.name);
        }

    </script>
</head>

<body>
<div class="panel panel-default" id="userSet">
    <div class="panel-heading">
        <h3 class="panel-title">课程章节管理<span id="errorMsg" style="color: red;"> </span></h3>
    </div>
    <div>
        <input type="button" value="添加章节" class="btn btn-primary" id="doAddCourseReource" style="margin: 5px 5px 5px 15px;" />
        <input type="button" value="查询" class="btn btn-success" id="doSearch" style="margin: 5px 5px 5px 0px;" />
        <input type="button" class="btn btn-primary" id="show-course-resource-search" value="展开搜索" />
        <input type="button" value="收起搜索" class="btn btn-primary" id="upp-course-resource-search" style="display: none;" />
        <input type="button" value="返回课程列表" class="btn btn-success" id="back" style="margin: 5px 15px 5px 0px;float: right;" />
    </div>
    <div class="panel-body">
        <div class="show-course-resource-search" style="display: none;">
            <form id="searchForm" action="${pageContext.request.contextPath}/Chapter/findAll">
                <input type="hidden" id="pageNo" name="pageNo">
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="course-resource-title-search" class="col-xs-3 control-label">标题：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="course-resource-title-search" placeholder="请输入标题" name="title"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="course-resource-info-search" class="col-xs-3 control-label">简介：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" id="course-resource-info-search" placeholder="请输入简介" name="info"/>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">开始日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" placeholder="请输入开始时间:2017-10-10" name="createStartDate"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">结束日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" placeholder="请输入结束时间:2017-10-12" name="createEndDate" />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="course-resource-stauts-search" class="col-xs-3 control-label">状态：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="course-resource-stauts-search" name="status" >
                                <option value="-1" >全部</option>
                                <option value="0" >启用</option>
                                <option value="1" >禁用</option>
                            </select>
                        </div>
                    </div>
                </div>

            </form>
        </div>

        <div class="show-list">
            <table class="table table-bordered table-hover" style='text-align: center;'>
                <thead>
                <tr class="text-danger">
                    <th class="text-center">编号</th>
                    <th class="text-center">标题</th>
                    <th class="text-center">简介</th>
                    <th class="text-center">创建时间</th>
                    <th class="text-center">状态</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
<%--                <tr>--%>
<%--                    <td>1</td>--%>
<%--                    <td>java基础</td>--%>
<%--                    <td>java基础相关</td>--%>
<%--                    <td>2017-10-10 12:00:00</td>--%>
<%--                    <td>启用</td>--%>
<%--                    <td class="text-center">--%>
<%--                        <input type="button" class="btn btn-warning btn-sm course-reource-modify-btn" value="修改">--%>
<%--                        <input type="button" class="btn btn-danger btn-sm" value="禁用">--%>
<%--                        <input type="button" class="btn btn-success btn-sm resource-detail" value="详情" />--%>
<%--                        <!-- <input type="button" class="btn btn-success btn-sm comment-detail" value="相关评论" /> -->--%>
<%--                        <a href="back_commentSet.html" class="btn btn-success btn-sm comment-detail">相关评论</a>--%>
<%--                    </td>--%>
<%--                </tr>--%>
<%--                <tr>--%>
<%--                    <td>2</td>--%>
<%--                    <td>java基础</td>--%>
<%--                    <td>java基础相关</td>--%>
<%--                    <td>2017-10-10 12:00:00</td>--%>
<%--                    <td>禁用</td>--%>
<%--                    <td class="text-center">--%>
<%--                        <input type="button" class="btn btn-warning btn-sm course-reource-modify-btn" value="修改">--%>
<%--                        <input type="button" class="btn btn-success btn-sm" value="启用">--%>
<%--                        <input type="button" class="btn btn-success btn-sm resource-detail" value="详情" />--%>
<%--                        <input type="button" class="btn btn-success btn-sm comment-detail" value="相关评论" />--%>
<%--                    </td>--%>
<%--                </tr>--%>

                <c:forEach items="${chapterPage.list}" var="chapter">
                <tr>
                    <td>${chapter.id}</td>
                    <td>${chapter.title}</td>
                    <td>${chapter.info}</td>
                    <td>${chapter.createDate}</td>
                    <td>${chapter.status==0?"启用":"禁用"}</td>
                    <td class="text-center">
                        <input type="button" class="btn btn-warning btn-sm course-reource-modify-btn" value="修改" data-id="${chapter.id}">
                        <c:if test="${chapter.status == 1}">
                            <input type="button" class="btn btn-danger btn-sm doChapterDisable" name="modifyStatus"
                                   data-id="${chapter.id}" data-status="${chapter.status}" value="禁用">
                        </c:if>
                        <c:if test="${chapter.status == 0}">
                            <input type="button" class="btn btn-success btn-sm doChapterEnable" name="modifyStatus"
                                   data-id="${chapter.id}" data-status="${chapter.status}" value="启用">
                        </c:if>
                        <input type="button" class="btn btn-success btn-sm resource-detail" value="详情" data-resource-id="${chapter.resource.id}" data-type="${chapter.resource.fileType}" />
                        <input type="button" class="btn btn-info btn-xs comment-detail" data-resource-id="${chapter.resource.id}" value="相关评论" />
                    </td>
                </tr>
                </c:forEach>

                </tbody>
            </table>
            <ul id="chapterPageHelper"></ul>
        </div>

        <!-- 分页 -->
<%--        <div style="text-align: center;" >--%>
<%--            <ul id="myPages" ></ul>--%>
<%--        </div>--%>
    </div>
</div>

<div class="modal fade" tabindex="-1" id="courseReourceModal" >
    <!-- 窗口声明 -->
    <div class="modal-dialog modal-lg">
        <!-- 内容声明 -->
        <div class="modal-content">
            <!-- 头部、主体、脚注 -->
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" >添加章节</h4>
            </div>
            <form id="addCourseResourceForm" enctype="multipart/form-data">
            <div class="modal-body text-center">
                <!-- course-id,没有时,移除 '返回课程列表' 按钮 -->
                <input type="hidden" name="courseId" value="${courseId}" />
                <div class="row text-right" id="course-resource-id-input" >
                    <label for="course-resource-id" class="col-xs-4 control-label">章节编号：</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="course-resource-id" name="id" readonly/>
                    </div>
                </div>
                <br>
                <div class="row text-right">
                    <label for="course-resource-title" class="col-xs-4 control-label">章节标题：</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="course-resource-title" name="title" />
                    </div>
                </div>
                <br>
                <div class="row text-right">
                    <label for="course-resource-context" class="col-xs-4 control-label">内容详情：</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="course-resource-context" name="info" />
                    </div>
                </div>
                <br>
                <p/>
                <div class="row text-right">
                    <label class="col-xs-4 control-label">资源：</label>
                    <div class="col-xs-4">
                        <a href="javascript:fileUpload('#course-resource-file');" class="file" >选择文件</a>
                        <input type="file"  style="display: none;" onchange="fileChange(this)" id="course-resource-file" name="file" />
                    </div>
                </div>
                <br/>
                <div class="row text-right">
                    <label for="course-resource-file-title" class="col-xs-4 control-label">资源标题：</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="course-resource-file-title"  name="resourceTitle" />
                    </div>
                </div>
                <br>
                <div class="row text-right">
                    <label for="file-cost-type" class="col-xs-4 control-label">查看资源花费类型：</label>
                    <div class="col-xs-4">
                        <select class="form-control" id="file-cost-type" name="costType"  >
                            <option value="-1" >请选择</option>
                            <option value="1" >积分</option>
                            <option value="2" >金币</option>
                        </select>
                    </div>
                </div>
                <br>
                <div class="row text-right">
                    <label for="file-cost-type-val" class="col-xs-4 control-label">花费值：</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" id="file-cost-type-val" name="costNum" />
                    </div>
                </div>
                <br>
                <div class="row text-right">
                    <label for="resource-type-id" class="col-xs-4 control-label">资源类型：</label>
                    <div class="col-xs-4">
                        <select class="form-control" id="resource-type-id" name="fileType" >
                            <option value="-1" >请选择</option>
                            <option value="mp4" >mp4</option>
                            <option value="pdf" >pdf</option>
                        </select>
                    </div>
                </div>
                <br>
            </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary course-resource-btn" id="addChapter">确定</button>
                    <button type="button" class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

</html>
